<template>
  <div class="flex">
    <button @click="toggleSlide" class="toggle">검색하기</button>
    <div :class="['slide-content left', { active: showSlide }]">
      <div class="wrap flex-between">
        <div class="search">
          <h2>횡단보도 등록</h2>
          <div class="box">
            <div class="flex-between m-b">
              <label for="">시/도</label>
              <select name="" id=""></select>
            </div>
            <div class="flex-between m-b">
              <label for="">시/군/구</label>
              <select name="" id=""></select>
            </div>
            <div class="flex-between m-b">
              <label for="">행정동</label>
              <select name="" id=""></select>
            </div>
            <div class="flex-between m-b">
              <label for="">교차로</label>
              <select name="" id=""></select>
            </div>
            <div class="flex-between m-b">
              <label for="">방위각</label>
              <select name="" id=""></select>
            </div>
            <div class="m-b">
              <div class="flex m-b">
                <label for="" class="m-r">횡단보도 좌표</label
                ><button>좌표수정</button>
              </div>
              <div class="flex gap">
                <div class="flex m-b">
                  <label class="m-r">위도 : </label>
                  <input
                    style="width: 9rem"
                    type="text"
                    name=""
                    id=""
                    placeholder="00.0000"
                  />
                </div>
                <div class="flex m-b">
                  <label class="m-r">경도 : </label>
                  <input
                    style="width: 9rem"
                    type="text"
                    name=""
                    id=""
                    placeholder="00.0000"
                  />
                </div>
              </div>
            </div>
            <div class="">
              <div class="m-b flex-start" style="margin-top: 3rem">
                <label for="">검지장비 선택</label>
              </div>
              <div class="flex-between m-b">
                <input type="checkbox" /><label for="">무단횡단</label>
                <input type="checkbox" /><label for="">신호연장</label>
                <input type="checkbox" /><label for="">우회전차량</label>
              </div>
              <div class="bottom">
                <div class="flex m-b">
                  <label class="m-r">무단횡단 검지 범위 : </label>
                  <input type="text" name="" id="" placeholder="" />
                </div>
                <div class="flex m-b">
                  <label class="m-r">왕복차선 정보 : </label>
                  <input type="text" name="" id="" placeholder="" />
                </div>
                <div class="flex m-b">
                  <label class="m-r">우회전 차선 유무 : </label>
                  <select style="width: 9rem" name="" id="">
                    <option value=""></option>
                  </select>
                </div>
                <div class="flex m-b">
                  <label class="m-r">우회전 차선 유형 : </label>
                  <input type="text" name="" id="" placeholder="" />
                </div>
                <div class="flex m-b">
                  <label class="m-r">횡단보도 관리자 : </label>
                  <div class="flex gap">
                    <input type="text" name="" id="" placeholder="" />
                    <button @click="modal_1 = true">검색</button>
                    <div class="modal-wrap" v-if="modal_1 == true">
                      <div class="modal-bg"></div>
                      <div class="modal">
                        <h2 class="flex-between">
                          횡단보도 유지보수 담당자 검색<button
                            type="button"
                            class="gray-btn"
                            @click="modal_1 = false"
                          >
                            <img
                              src="../../../resources/images/close.png"
                              alt=""
                            />
                          </button>
                        </h2>
                        <div class="modalmain">
                          <div
                            class="flex-end gap m-b"
                            style="margin-top: 3rem"
                          >
                            <select name="" id="">
                              <option value="">검색조건</option>
                              <option value="">이름</option>
                              <option value="">소속정보</option>
                            </select>
                            <input type="text" />
                            <button type="button" class="btn-2 green-btn">
                              검색
                            </button>
                          </div>
                          <table>
                            <thead>
                              <tr>
                                <td>No</td>
                                <td>이름</td>
                                <td>전화번호</td>
                                <td>소속정보</td>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                              </tr>
                            </tbody>
                          </table>
                          <div class="bottom-wrap">
                            <div class="pg-wrap">
                              <a href="#" class="pg-item prev">◀</a>
                              <a href="#" class="pg-item active">1</a>
                              <a href="#" class="pg-item">2</a>
                              <a href="#" class="pg-item">3</a>
                              <a href="#" class="pg-item">4</a>
                              <a href="#" class="pg-item">5</a>
                              <a href="#" class="pg-item next">▶</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex-center gap" style="margin-top: 3rem">
              <button @click="modal_2 = true">등록</button>
              <div class="modal-wrap" v-if="modal_2 == true">
                <div class="modal-bg"></div>
                <div class="modal2">                  
                  <div class="modalmain2"><h4 class="flex-between">
                    횡단보도를&nbsp;<em style="color: blue">등록</em>&nbsp;하시겠습니까?
                  </h4>
                  <div class="flex-center gap" style="margin-top: 3rem;">
                    <button @click="modal_2 = false">확인</button>
                    <button @click="modal_2 = false">취소</button>
                  </div>
                  </div>
                </div>
              </div>
              <button>취소</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div><OpenLayers  ref="open_layers" /></div>
    </div>
  </div>
</template>
<style scoped>
@media all and (max-width: 479px) {
  .top {
    overflow: scroll;
  }
  .top ul {
    width: 137rem;
    overflow: hidden;
    justify-content: space-between !important;
    padding: 2rem 1rem !important;
  }
  .top li {
    display: flex;
  }
  .search {
    width: inherit;
  }
  /* .toggle {
    color: #fff;
    font-weight: bold;
    background: #13833b;
    display: block !important;
    position: absolute;
    z-index: 150;
    top: 7.5rem;
    right: 1rem;
  } */
  .wrap {
    height: auto !important;
    width: inherit;
  }
  .slide-content {
    position: absolute;
    z-index: 97;
    top: 6.5rem;
    left: -36rem;
    width: 34rem;
    height: 100vh;
    background-color: #f0f0f0;
    transition: transform 0.3s ease;
    transform: translateX(100%);
  }

  .slide-content.active {
    transform: translateX(0);
  }
}
.toggle {
  display: none;
}
label {
  width: max-content;
  text-align: left;
}
.search .box {
  padding: 1rem 2rem;
}
.search input[type="text"] {
  width: 9rem;
}

.btn_set {
  position: relative;
  border-bottom: 1px solid #e5e3e3;
  padding: 0 0 1rem 0;
}
.btn_set div {
  position: absolute;
  top: 40px;
  width: 313px;
  height: 380px;
  background: #fff;
  padding: 1rem;
}
.bg-white {
  min-height: 46.6rem;
  max-height: 46.6rem;
  overflow: scroll;
  overflow-x: hidden;
}
.bg-white::-webkit-scrollbar-thumb {
  background-color: #fff;
}
h2 {
  background: #50ba8a;
  text-align: center;
  color: #fff;
  padding: 1.6rem 0;
}
.top p {
  font-size: 15px;
}
.top ul {
  padding: 1rem 0;
}
.top li {
  width: calc(100% / 6);
  text-align: center;
}
.top h3 {
  font-size: 20px;
}
.wrap {
  z-index: 100;
  top: 0;
  height: 865px;
}
.left {
  background: #fff;
}
.right {
  width: -webkit-fill-available;
}
.pg-item {
  display: inline-block;
  padding: 10px;
  color: #949292;
}
table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}

th,
td {
  border-left: none;
  border-right: none;
}

table th {
  padding: 15px 0;
  color: #fff;
  background-color: #13833b;
}

table td {
  padding: 10px 0;
  border-bottom: 1px solid #e5e5dd;
}

table thead tr {
  background-color: #f7f6f6;
}
.modal2{padding: 3rem;}
.modal2 h4{font-size: 2rem;}
.modal {
  width: 100rem;
}
.modalmain {
  padding: 1rem;
  max-height: 70rem;
  overflow: scroll;
  overflow-x: hidden;
}
.modalmain select {
  width: max-content;
}
.modalmain input[type="text"] {
  width: inherit;
}
.modalmain table thead {
  background: #f7f6f6;
}
.modalmain table td {
  border: 1px solid #eee;
}
.modal h2 {
  background: #e5e5dd;
  font-size: 2rem;
  padding: 1rem;
  color: #333;
}
.modal-bg h2 {
  background: #e5e5dd;
  font-size: 2rem;
  padding: 1rem;
}
.modal h3 {
  font-size: 1.8rem;
  border-bottom: 1px solid #eee;
  padding: 1rem 0 0.2rem 0;
}
.modal h4 {
  font-size: 1.6rem;
  font-weight: 100;
  padding: 0.2rem 0 1rem 0;
}
.modal h2 button {
  border: 0;
  background: none;
  height: 30px;
  cursor: pointer;
}
.modal-bg button {
  border: 0;
  background: none;
  height: 30px;
  cursor: pointer;
}
.modal button img {
  width: 25px;
}
</style>
<script>
import axios from 'axios';
import MapPage from "../../component/MapPage.vue";
import OpenLayers from "../../component/OpenLayers.vue";
import {
  vworldBaseLayer,
  vworldGrayLayer,
  vworldMidnightLayer,
  vworldHybridLayer,
  vworldSatelliteLayer,
} from "../../component/OpenLayersMap.vue"; 
import {baseStyles} from '../../component/OpenLayersStyle.vue';

var freeBus = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "popupContent": "18th & California Light Rail Stop",
                "data" : 123
            },
            "geometry": {
                "type": "Point",
                "coordinates": [126.9757184, 37.564388]                
            }
        },{
            "type": "Feature",
            "properties": {
                "popupContent": "20th & Welton Light Rail Stop",
                "data" : 456
            },
            "geometry": {
                "type": "Point",
                "coordinates": [124.9748523, 37.5796212]
            }
        }
    ]
};

export default {
  data() {
    return {
      showSlide: false,
      modal_1: false,
      modal_2: false,
      tabs: [
        {
          id: 1,
          title: "상황발생현황",
          content1: "This is the content for Tab 1",
        },
        {
          id: 2,
          title: "장애발생현황",
          content2: "This is the content for Tab 2",
        },
      ],
      activeTab: 1,
      items: [
        { id: 1, name: "무단횡단", isActive: false },
        { id: 2, name: "신호연장", isActive: false },
        { id: 3, name: "우회전 차량", isActive: false },
        { id: 4, name: "장애발생", isActive: false },
      ],
    };
  },
  components: {
    MapPage: MapPage,
    OpenLayers: OpenLayers,
  },
  methods: {
    toggleSlide() {
      this.showSlide = !this.showSlide;
    },
    changeTab(tabId) {
      this.activeTab = tabId;
    },
    toggleActive(item) {
      item.isActive = !item.isActive;
    },
    childClick : function(prop,coordinate){        
       
      console.log(prop);
      console.log(coordinate);

      // 레이어 삭제
      this.$refs.open_layers.removeLayer('point1');

      // Icon 그리기 
      this.$refs.open_layers.createIcon(coordinate[0],coordinate[1],'/client/resources/images/icon/fin.png',0.3, 'point1');        

    }
  },
  watch: {},
  computed: {},
  mounted() {
    console.log("Main2 mounted");   
    var vm = this;
    // 지도 초기화 
    this.$refs.open_layers.setBaseMap(vworldBaseLayer);    
     //this.$refs.open_layers.addVectorLayerByUrl('/testDongGeoJson.json','testMap','EPSG:4326', baseStyles['labelStyle'],'label');    
     this.$refs.open_layers.addVectorLayerByUrl('/testDongGeoJson2.json','testMap','EPSG:5181', baseStyles['MultiPolygon'],'MultiPolygon'); 

  },
};
</script>
